---
import { Icon } from '@astrojs/starlight/components';
import { getLanguageFromURL } from '~/util/path-utils';

const lang = getLanguageFromURL(Astro.url.pathname);
---

<section class="sl-flex">
	<a href={`/${lang}/contribute/`} class="sl-flex">
		<Icon name="rocket" size="1.2em" />
		{Astro.locals.t('footer.contribute')}
	</a>

	<a href="https://astro.build/chat" class="sl-flex">
		<svg
			xmlns="http://www.w3.org/2000/svg"
			width="16"
			height="16"
			viewBox="0 0 24 24"
			fill="currentColor"
			style="width:1.2em;height:1.2em;"
		>
			<path
				d="M12.3 12.22A4.92 4.92 0 0 0 14 8.5a5 5 0 0 0-10 0a4.92 4.92 0 0 0 1.7 3.72A8 8 0 0 0 1 19.5a1 1 0 0 0 2 0a6 6 0 0 1 12 0a1 1 0 0 0 2 0a8 8 0 0 0-4.7-7.28M9 11.5a3 3 0 1 1 3-3a3 3 0 0 1-3 3m9.74.32A5 5 0 0 0 15 3.5a1 1 0 0 0 0 2a3 3 0 0 1 3 3a3 3 0 0 1-1.5 2.59a1 1 0 0 0-.5.84a1 1 0 0 0 .45.86l.39.26l.13.07a7 7 0 0 1 4 6.38a1 1 0 0 0 2 0a9 9 0 0 0-4.23-7.68"
			></path>
		</svg>
		{Astro.locals.t('footer.community')}
	</a>

	<a href="https://opencollective.com/astrodotbuild" class="sl-flex">
		<Icon name="heart" size="1.2em" />
		{Astro.locals.t('footer.sponsor')}
	</a>
</section>

<style>
	section {
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
		font-size: var(--sl-text-sm);
	}

	a {
		align-items: center;
		text-decoration: none;
		gap: 0.5rem;
		color: var(--sl-color-gray-3);
	}

	a:hover {
		color: var(--sl-color-white);
	}
</style>
